/**
 * Created by fandongyang on 2017/7/27.
 */
import React, {Component} from 'react';
import {Dimensions, View, Text, StyleSheet, TextInput, Image, TouchableOpacity} from 'react-native' ;
import {TextField} from 'react-native-material-textfield';

const {width, height} = Dimensions.get('window');
import Video from "react-native-video";
import BackgroundVideo from '../../video/background.mp4';

class Login extends Component {
    static navigationOptions = {
        tabBarVisible: false,
        // header:null,
    }
    // 默认属性
    static defaultProps = {};

    // 属性类型
    static propTypes = {};

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            phone: ''
        };
    }

    // 自定义方法
    handle() {

    }

    // 渲染
    render() {
        let {phone} = this.state;
        return (
            <View style={styles.defaultView}>

                {/*<Video repeat source={BackgroundVideo} resizeMode="cover" style={StyleSheet.absoluteFill}/>*/}
                {/*  <Image source={require('../../images/loginBG.png')}
                       style={[{resizeMode: Image.resizeMode.cover, width: width, height: height}]}>*/}
                <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
                    <TouchableOpacity activeOpacity={1} onPress={() => this.props.navigation.goBack()}
                                      style={[styles.header, {width: width * .25, marginLeft: 10}]}>
                        <Text style={{color: 'white'}}>关闭</Text>
                    </TouchableOpacity>
                    <View style={[styles.header, {flex: 1, alignItems: 'center'}]}>
                        <Text style={{color: 'white', fontSize: 16}}>登录账户</Text>
                    </View>
                    <TouchableOpacity
                        activeOpacity={1}
                        style={[styles.header, {width: width * .3, alignItems: 'flex-end', marginRight: 10}]}>
                        <Text style={{color: 'white'}}>注册</Text>
                    </TouchableOpacity>

                </View>

                <View style={[styles.defaultView, {paddingTop: height * .15}]}>
                    <TextInput
                        placeholder="手机/邮箱"
                        underlineColorAndroid={'transparent'}
                        placeholderTextColor={'rgba(255,255,255,.5)'}
                        style={styles.input}

                    />
                    <TextInput
                        placeholder="密码"
                        secureTextEntry
                        placeholderTextColor={'rgba(255,255,255,.5)'}
                        underlineColorAndroid={'transparent'}
                        style={styles.input}
                    />

                    <TouchableOpacity activeOpacity={.8} style={[styles.input, {
                        backgroundColor: 'white', height: 40, borderRadius: 5,
                        alignItems: 'center', justifyContent: 'center',
                        marginTop: 25,
                    }]}>
                        <Text style={{color: '#44C598'}}>登录</Text>
                    </TouchableOpacity>
                    <TouchableOpacity activeOpacity={.8} style={{paddingTop: 10}}>
                        <Text style={{color: 'white', fontSize: 12}}>忘记密码?</Text>
                    </TouchableOpacity>
                </View>
                {/*</Image>*/}
            </View>
        );
    }

}

let styles = StyleSheet.create({
    header: {
        borderBottomWidth: StyleSheet.hairlineWidth,
        height: 60,
        justifyContent: 'center',
        borderBottomColor: 'white',
    },
    defaultView: {
        flex: 1,
        alignItems: "center",
        backgroundColor: '#44C598'
    },
    container: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
    },
    input: {
        width: 250,
        height: 50,
        color: '#fff',
        backgroundColor: "transparent",
        marginTop: 5,
        paddingLeft: 15,
        padding: 0,
        borderBottomColor: 'rgba(255,255,255,.5)',
        borderBottomWidth: StyleSheet.hairlineWidth,
        fontSize: 14
    },

})

export default Login;
